<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/12/4</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!--好的代码像粥一样,是得用时间和精力熬的。-->
</head>
<body>
<div id="root">
    <input type="text" @input="fn" v-model="searchText">
    <br>
    <p v-for="item in searchRes">{{item.username}}--{{item.age}}</p>
</div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            searchText: '',
            searchRes: []
        },
        methods: {
            /* fn(){
                 $.ajax({
                     url:'http://localhost:8080/search',
                     method:'get',
                     dataType:'json',
                     data:{
                         searchText: this.searchText
                     }
                 }).then(function (data) {
                     console.log(data);
                 }).catch(function (error) {
                     console.log(error);
                 });
             }*/
        },
        computed: {
            //节流
            fn() {
                var self = this;
                // var start=0;
                var timer = null;
                return function () {
                    clearTimeout(timer);
                    timer = setTimeout(function () {
                        timer = null;
                        !!self.searchText && $.ajax({
                            url: 'http://localhost:8080/search',
                            method: 'get',
                            dataType: 'json',
                            data: {
                                searchText: self.searchText
                            }
                        })
                            .then(function (data) {
                                console.log(data);
                                self.searchRes = data.data;
                            }).catch(function (error) {
                                console.log(error);
                            });
                    }, 550);
                    // var end =new Date().getTime();
                    /*      if(!timer){
                              timer=setTimeout(function(){
                               !!self.searchText&&$.ajax({
                                      url:'http://localhost:8080/search',
                                      method:'get',
                                      dataType:'json',
                                      data:{
                                          searchText: self.searchText
                                      }
                                  }).then(function (data) {
                                      console.log(data);
                                      self.searchRes =data.data;
                                  }).catch(function (error) {
                                      console.log(error);
                                  });
                                  start = end;
                              },350)
                          }*/
                }
            }
        }
    })
</script>
</html>
